<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: rgb(205,205,205);
        }
        #app{
            color:white;
        }
        #head{
            height: 100px;
            text-align: center;
            background-color:rgb(50,50,50);
        }
        #input{
            width: 360px;
            height: 40px;
            margin: 10px 20px 0 100px;
            padding-left: 15px;
            font-size: 16px;
            border-radius: 10px;
            outline: none;
        }
        #add{
            width: 50px;
            height: 45px;
            border-radius: 8px;
        }
        .body{
            width: 800px;
            margin: 0 auto;
        }
        .todo{
            height: 50px;
            line-height: 50px;
            margin-top: 10px;
            background-color: white;
            color:black;
            vertical-align: middle;
        }
        h2{
            float: left;
            color:black;
        }
        .clearbox::after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            clear: both;
            overflow: hidden;
        }
        div.num{
            float: right;
            width: 20px;
            height: 20px;
            text-align: center;
            background-color: rgba(255,255,255,1);
            color:red;
            border-radius:50%;
        }
    
    </style>
</head>

<body>

    <div id="app">
        <div id="head">
            <h1>toDoList</h1>
            <input type="text" v-on:keydown="keyDown" v-model="msg" placeholder="请输入要待办的事项" id="input">
            <button v-on:click="btnClick" id="add">新增</button>
        </div>
        <div class="body">
            <div class="todoHead clearbox">
                <h2 >待办事项:</h2>
                <div  class="num">{{list.length}}</div>
            </div>
            <div class="todo" v-for="item in list">

                <span class="do">{{item.index}}---{{item.msg}}</span>
 
            </div>

        </div>

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                // v-model的双向绑定获取input标签中的内容
                msg:"",
                // 输入的索引
                index:1,
                // 存储input每次输入的内容
                list: [],
            },
            methods: {
                btnClick() {
                    // 判断内容是否存在或输入是否为空
                    if(this.list.some(item=>item.msg==this.msg)){
                        alert("您输入的事项已存在");

                    }else if(this.msg.trim()==""){
                        alert("您输入的事项为空");
                        
                    }

                    this.list.push({
                        index:this.index++,
                        msg:this.msg,
                    });

                    this.msg="";
                },
                keyDown(e){
                    console.log(e.keyCode);
                    if(e.keyCode==13){
                        this.btnClick();
                    }
                }


            }
        });



    </script>
</body>

</html>
